<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超市前台首页</title>
</head>
<body>
<div id="app">
    <div id="top" align="right" style="width: 90%">
        <span v-if="!login.success">
            <span style="color: red;">{{login.errorMsg}}</span>
            账号：<input type="text" v-model="login.code"/>
            密码：<input type="password" v-model="login.pass"/>
            <button @click="userLogin">登陆</button>
        </span>
        <span v-else>
            欢迎,{{login.name}}的访问！
            <a href="#" @click="toCart">查看购物车</a>
            <a href="#" @click="logout">注销</a>
        </span>
    </div>
    <br/><br/><br/>
    <div id="search" align="center">
        商品名称：<input type="search" v-model="goodsName"/>
        <button @click="searchGoods">🔍</button>
    </div>
    <br/><br/><br/>
    <div id="main">
        <table width="80%" align="center">
            <caption>总计{{goods.total}}种商品</caption>
            <tr>
                <th v-for="g in goods.list">
                    <img src="../images/pic1.jpg"/><br/>
                    {{g.goodsName}}<br/>
                    ¥{{g.goodsPrice}}元<br/>
                    <button>查看</button>
                    <button @click="addCart(g.id)">加入购物车</button>
                </th>
            </tr>
            <tr style="background-color: #edfbfb">
                <th colspan="5">
                    <span v-for="p in goods.pages">
                        <a href="#" @click="loadIndexData(p)">{{p}}</a>&nbsp;
                    </span>
                </th>
            </tr>
        </table>
    </div>
</div>
</body>
</html>
<script src="../js/vue.min.js"></script>
<script src="../js/axios.min.js"></script>
<script src="../js/vue.before.index.js"></script>